{{!
  Copyright (c) HashiCorp, Inc.
  SPDX-License-Identifier: BUSL-1.1
}}

{{#if @byMonthNewClients.length}}
  <Clients::CountsCard
    @title="Client usage trends for selected billing period"
    @description={{this.chartContainerText}}
    @legend={{this.chartLegend}}
  >

    <:dataLeft>
      <StatText
        @label="New client total and type distribution"
        @subText="The number of new clients which interacted with Vault during the selected period."
        @value={{@runningTotals.clients}}
        @size="m"
        @tooltipText="This number is the total for the queried date range. The chart displays a monthly breakdown of total new clients per month."
      />

      <div class="has-top-padding-l is-flex-row gap-16">
        <StatText @label="Entity" @value={{@runningTotals.entity_clients}} @size="m" />
        <StatText @label="Non-entity" @value={{@runningTotals.non_entity_clients}} @size="m" />
      </div>
      <div class="has-top-padding-m is-flex-row gap-16">
        <StatText @label="ACME" @value={{@runningTotals.acme_clients}} @size="m" />
        {{#if this.flags.secretsSyncIsActivated}}
          <StatText @label="Secret sync" @value={{@runningTotals.secret_syncs}} @size="m" />
        {{/if}}
      </div>
    </:dataLeft>

    <:dataRight>
      <div class="flex space-between has-bottom-margin-xl left-padding-16">
        <Hds::Text::Body @tag="p">Client usage by month</Hds::Text::Body>
        <Hds::Form::Toggle::Field
          data-test-input="toggle view"
          {{on "change" (fn (mut this.showStacked) (not this.showStacked))}}
          as |F|
        >
          <F.Label>Split by client type</F.Label>
        </Hds::Form::Toggle::Field>
      </div>
      {{#if this.showStacked}}
        <Clients::Charts::VerticalBarStacked
          @chartTitle="Client usage by month"
          @data={{this.runningTotalData}}
          @chartLegend={{this.chartLegend}}
          @chartHeight={{200}}
        />
      {{else}}
        <Clients::Charts::VerticalBarBasic
          @chartTitle="Client usage by month"
          @data={{this.runningTotalData}}
          @dataKey="new_clients"
          @chartHeight={{200}}
        />
      {{/if}}
    </:dataRight>
  </Clients::CountsCard>
{{else}}
  {{! Renders when viewing activity log data that predates the monthly breakdown added in 1.11 }}
  <Clients::UsageStats @title="Client usage" @description="Total client usage for the selected billing period.">
    <StatText
      class="column"
      @label="Total clients"
      @value={{@runningTotals.clients}}
      @size="l"
      @subText="The number of clients which interacted with Vault during this month. This is Vault’s primary billing metric."
    />
    <StatText
      class="column"
      @label="Entity"
      @value={{@runningTotals.entity_clients}}
      @size="l"
      @subText="Representations of a particular user, client, or application that created a token via login."
    />
    <StatText
      class="column"
      @label="Non-entity"
      @value={{@runningTotals.non_entity_clients}}
      @size="l"
      @subText="Clients created with a shared set of permissions, but not associated with an entity."
    />
    <StatText
      class="column"
      @label="ACME"
      @value={{@runningTotals.acme_clients}}
      @size="l"
      @subText="Each ACME request counts as one client."
    />
    {{#if this.flags.secretsSyncIsActivated}}
      <StatText
        class="column"
        @label="Secret sync"
        @value={{@runningTotals.secret_syncs}}
        @size="l"
        @subText="A secret with a configured sync destination qualifies as a unique and active client."
      />
    {{/if}}
  </Clients::UsageStats>
{{/if}}